<template>
  <uni-popup ref="popup" type="top" safeArea backgroundColor="#fff">
    <view class="flex-col bg-white content-wrap popup-content">
      <view style="padding: 20rpx; width: 100%">
        <search placeholder="请输入车牌号" style="" @input="inputChange" />
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx;z-index: 9999" >
        <uni-list>
          <uni-list-item v-for="item in tableData" :key="item.carId">
            <template v-slot:body>
              <view class="slot-box" @click="handleSelect(item)">
                <text class="slot-text">{{ `${item.carNo}(${item.vinNo})` }}</text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import * as apis from '@/api/vehicleWarning'

export default {
  name: 'carPopup',
  computed: {},
  watch: {},
  data() {
    return {
      form: {
        carNo: '',
        isDisposal: '',
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      total: 0,
      isDialog:false
    }
  },
  created() {},
  mounted() {},
  methods: {
    open() {
      this.$refs.popup.open()
      this.handleList()
    },
    inputChange(val) {
      this.form.carNo = val
      this.handleList()
    },
    handleSelect(item) {
      if(item.carLockType && Number(item.carLockType) === 1){
        this.$modal.alert("当前车辆已被占用，不能进行处置操作");
        return
      }
      this.$emit('change', item || {})
      this.$refs.popup.close()
    },
    async handleList() {
      try {
        const res = await apis?.getVehicleDisposalList(this.form)
        this.tableData = res.data
        this.total = res.total
      } catch (e) {
        console.error(e)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.popup-content {
  overflow: auto;
  max-height: 60vh;
}
.uni-popup__wrap {
  z-index: 9999 !important; /* 设置一个足够大的z-index以覆盖其他元素 */
}

</style>
